<template>
  <div class='refund-order-page'>
    <div class="goods-info">
      <img class="goods-item-image" :src="picUrl">
      <div class="goods-item-info">
        <div class="goods-name">{{goodsName}}</div>
        <!--<div class="goods-norms">{{goodsNorms}}</div>-->
        <div class="goods-info-bottom">
          <div class="goods-info-left">
            <div class="goods-real-fee">
              <div class="icon">￥</div>
              {{fee}}
            </div>
          </div>
          <div class="goods-info-right">
            x{{goodsNum}}
          </div>
        </div>
      </div>
    </div>
    <div class="refund-order-item">
      <div class="item-title">退款内容</div>
      <div class="item-choose-item item-font" v-if="refundContent.length <= 0" @click="showContent">申请退款></div>
      <div class="item-font" v-if="refundContent.length > 0">{{refundContent}}</div>
    </div>
    <div class="refund-order-item">
      <div class="item-title">退款金额</div>
      <div class="item-font">￥{{goodsFee}}</div>
    </div>
    <div class="refund-order-item">
      <div class="item-title">退款方式</div>
      <div class="item-font">原路退回</div>
    </div>
    <div class="refund-order-item">
      <div class="item-title">申请原因</div>
      <div class="item-choose-item item-font" v-if="refundReason.length <= 0" @click="showReason">请选择申请原因></div>
      <div class="item-font" v-if="refundReason.length > 0">{{refundReason}}</div>
    </div>
    <div class="reason">
      <div class="title">详细说明</div>
      <textarea placeholder="请您再次描述详细问题" class="font" @click="changeReason"/>
    </div>
    <div class="submit">提交申请</div>
    <div class="background" v-if="showRefundContentFlag || showRefundReasonFlag"></div>
    <div class="refund-content" v-if="showRefundContentFlag">
      <div class="refund-content-font">退款内容</div>
      <div class="refund-content-item" v-for="(item,index) in refundContentList" :key="index">
        <div class="item-name">{{item.name}}</div>
        <div class="no-choose-item" v-if="chooseRefundContent !== item.code" data-code="item.code" @click="changeRefundContent"></div>
        <img class="choose-item" src="../../assets/checked.png" v-if="chooseRefundContent === item.code">
      </div>
      <div class="submit-content" @click="chooseContent">确定</div>
    </div>
    <div class="refund-reason" v-if="showRefundReasonFlag">
      <div class="refund-reason-font">申请原因</div>
      <div class="refund-reason-item" v-for="(item,index) in refundReasonList" :key="index">
        <div class="item-name">{{item.name}}</div>
        <div class="no-choose-item" v-if="chooseRefundReason !== item.code" data-code="item.code" @click="changeRefundReason"></div>
        <img class="choose-item" src="../../assets/checked.png" v-if="chooseRefundReason === item.code">
      </div>
      <div class="submit-reason" @click="chooseContent">确定</div>
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return {
      productSkuId: '3',
      picUrl: '',
      goodsName: '海南妃子笑荔枝新鲜包邮当季特产水果现摘现买',
      goodsNorms: '规格五斤一箱',
      fee: '39.00',
      goodsNum: 2,
      reason: '',
      showRefundContentFlag: false,
      refundContentList: [
        {
          'code': '1',
          'name': '退货退款'
        },
        {
          'code': '2',
          'name': '货未收退款'
        }
      ],
      chooseRefundContent: '',
      refundContent: '',
      showRefundReasonFlag: false,
      refundReasonList: [
        {
          'code': '1',
          'name': '7天无理由'
        },
        {
          'code': '2',
          'name': '商品质量问题'
        },
        {
          'code': '3',
          'name': '商品过期/接近有效期'
        },
        {
          'code': '4',
          'name': '商品名称一致，但与网页介绍不符'
        },
        {
          'code': '5',
          'name': '商品发错'
        },
        {
          'code': '6',
          'name': '其他'
        }
      ],
      chooseRefundReason: '',
      refundReason: ''
    }
  },
  methods = {
    changeReason: function (e) {
      this.reason = e.detail.value
    },
    showContent () {
      this.showRefundContentFlag = true
    },
    changeRefundContent (e) {
      this.chooseRefundContent = e.currentTarget.dataset.code
    },
    chooseContent () {
      if (this.chooseRefundContent) {
        this.refundContentList.forEach(item => {
          if (item.code === this.chooseRefundContent) {
            this.refundContent = item.name
          }
        })
        this.showRefundContentFlag = false
      }
    },
    showReason () {
      this.showRefundReasonFlag = true
    },
    changeRefundReason (e) {
      this.chooseRefundReason = e.currentTarget.dataset.code
    },
    chooseReason () {
      if (this.chooseRefundReason) {
        this.refundReasonList.forEach(item => {
          if (item.code === this.chooseRefundReason) {
            this.refundReason = item.name
          }
        })
        this.showRefundReasonFlag = false
      }
    },
    initFun(options) {

    },
  },
  created(options) {
    if (options.shoppingCarIds) {
      this.orderFrom = '0'
      var ids = options.shoppingCarIds
      var idList = ids.split(',')
      idList.forEach(item => {
        this.shoppingCartIds.push(parseInt(item))
      })
    } else {
      this.orderFrom = '1'
      this.productSkuId = options.productSkuId
    }
    this.initFun()
  },
  mounted() {
    this.initFun()
  }
}
</script>

<style lang='less' scoped>
@import '../../css/common.less';
@import '../../css/order/refundOrder.less';
</style>
